<template>
<div>
  <!-- <swiper :list="imgList"></swiper> -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://img5.imgtn.bdimg.com/it/u=247879390,977047675&fm=26&gp=0.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(http://img2.imgtn.bdimg.com/it/u=1400002393,2435851783&fm=26&gp=0.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(http://img2.imgtn.bdimg.com/it/u=1864990024,1709204602&fm=26&gp=0.jpg)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <scroll
    ref="scroll"
    :isNotMore="isNotMore"
    @fnEmitRefresh="fnHandleRefresh"
    @fnEmitLoadMore="fnHandleLoadMore">
    <div style="padding: 10px 0">
      <div class="box" v-for="(item, index) in list" :key="index">
        <p class="list">{{item.title}}</p>
      </div>
    </div>
    <!-- <divider>我是有底线的</divider> -->
  </scroll>
  <baseFooter></baseFooter>
  <loading></loading>


</div>
</template>
<script>
import axios from 'axios';
import Swiper from 'swiper';
import {
  Divider
} from 'vux';
import scroll from 'base/scroller/scroller.vue';
import swiper from 'base/swiper/swiper.vue';
import baseFooter from 'base/footer/footer.vue';
import loading from 'base/loading/loading.vue';
import wxJdk from 'common/js/wx-jdk';

export default {
  mounted() {
    console.log(wxJdk.wxShare())
    this.fetchData();
    this.initSwiper();
  },
  data() {
    return {
      list: [],
      imgList: [{
        url: 'www.baidu.com',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
        title: '送你一朵fua'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
        title: '送你一辆车'
      }],
      isNotMore: false
    }
  },
  methods: {
    initSwiper() {
      new Swiper('.swiper-container', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 40,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      });
    },
    fnHandleLoadMore() {
      axios.get('http://api.sailafeinav.com/information/v1/GlobalInfo/?username=15155056161&type=2').then(response => {
        this.list = [...response.data.results, ...this.list]
        this.$refs.scroll.fnRestConfig()
      })
    },
    // 数据加载完之后派发重置
    fnHandleRefresh() {

      this.fnHandleLoadMore()
    },
    fetchData() {
      axios.get('http://api.sailafeinav.com/information/v1/GlobalInfo/?username=15155056161&type=2').then(response => {
        this.list = response.data.results
        this.isNotMore = true
      })
    }
  },
  components: {
    scroll,
    swiper,
    Divider,
    baseFooter,
    loading
  }
}
</script>
<style lang="less">
.box {
    padding: 5px 10px;
    &:first-child {
        padding: 0 10px 5px;
    }
    &:last-child {
        padding: 5px 10px 0;
    }
}
.swiper-container {
    width: 100%;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 150px;
}
.list {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    padding: 30px;
}
.xs-plugin-pulldown-container {
    line-height: 40px;
}
.xs-plugin-pullup-container {
    line-height: 40px;
}
</style>
